﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="css/amazeui.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/common.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <style>
        * {
            padding: 0;
            border: 0;
            margin: 0;
        }

        body {
            background: #efefef;
        }

        .veads1_i1 {
            display: block;
            float: left;
            margin-top: 2%;
            width: 2.5%;
        }

        .veads1_s1 {
            display: block;
            text-align: center;
            font-size: 1.8rem;
        }
    </style>
</head>
<body>
    <div id="order" v-cloak>

        <header data-am-widget="header" class="am-header am-header-default" style="background-color: #FFFFFF; border-bottom: 1px solid rgb(211, 211, 211);">
            <div class="am-header-left am-header-nav" onclick="goBack()">
                <a href="javascript:" class="">
                    <img class="am-header-icon-custom" src="images/veas07.png" alt="" />
                </a>
            </div>
            <h4 class="am-header-title" style=" color: black;">我的订单</h4>
            <div class="am-header-right am-header-nav"><a href="/Wap/Index.html" class="am-header-icon am-icon-home" style="color: #A9A9A9; "></a></div>
        </header>
        <select class="choice" v-on:change="indexSelect($event)">
            <option v-for="item in index" v-bind:value="item.indexId">{{item.name}}</option>
        </select>

        <div class="am-g" style="background: #fff;margin-bottom: 2%" v-for="list in orderList">
            <a href="javascript:" v-on:click="seeInfo(list.o.ordergId,list.o.Type)">
                <div class="am-u-sm-12" style="padding: 0">
                    <ul class="am-list">
                        <li style="display: block;overflow: hidden;border-top: none;padding: 3% 4%">
                            <span style="float:left;">{{list.o.Name}}</span>
                            <span style="font-size:1.5rem;float:right;color:#ff9129">{{list.o.State==0?"未付款":list.o.State==1?"已付款":list.o.State==-1?"已过期":list.o.State==-2?"已取消":"状态异常"}}</span>
                        </li>
                        <li style="display: block;overflow: hidden;border-bottom: none;padding: 2% 4% 0 4%">
                            <div style="font-size: 1.5rem;overflow: hidden;margin-bottom: 4%"><span style="float:left;">{{list.o.Type==1?"订场订单":list.o.Type==2?"人次票订单":list.o.Type==3?"报名订单":"类型异常"}}</span><span style="float:right;">{{list.createTime}}</span></div>
                            <div style="font-size: 1.5rem;overflow: hidden;margin-bottom: 4%"><!--<img src="images/veas03.png" alt="" style="width: 4.5%;display: block;float: left;margin-right: 2%;margin-top: 0.5%;">--><span style="font-size: 1.5rem">    </span></div>
                            <div style="font-size: 1.5rem;overflow: hidden;">
                                <!--<img src="images/veas02.png" alt="" style="width: 4.5%;display: block;float: left;margin-right: 2%;margin-top: 0.5%;">-->
                                <span style="font-size: 1.5rem;float:left;">    </span>
                                <span style="float: right;font-size: 2rem;color: #23c788;margin-top: -2%">{{list.o.Money}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </a>

        </div>
        <div v-if="pageinfo.pageCount>page" class="am-list-news-ft" style="padding-bottom:15px;">
            <a class="am-list-news-more am-btn am-btn-default" v-on:click="page=page+1" href="javascript:void(0)">查看更多 &raquo;</a>
        </div>
        <div v-if="pageinfo.pageCount==page" class="am-list-news-ft" style="padding-bottom:15px;color:#757575;">
            无更多数据
        </div>
    </div>
</body>
<script src="js/zishiying.js"></script>

<script>
    var page = new Vue({
        el: '#order',
        data: {
            orderList: [],
            page: 1,
            pagesize: 10,
            pageinfo: {},
            indexId:-3,
            index: [{
                "indexId": -3,
                "name": "所有订单"
            }, {
                "indexId": 0,
                "name": "未付费"
            }, {
                "indexId": 1,
                "name": "已付费"
            }, {
                "indexId": -1,
                "name": "已过期"
            }, {
                "indexId": -2,
                "name": "已取消"
            }]
        },
        methods: {
            getInfo: function () {
                var that = this;
                $.ajax({
                    type: 'GET',
                    url: apiUrl + '/Api/Mine/GetAllOrder',
                    data: { page: that.page, pagesize: that.pagesize, state: that.indexId },
                    success: function (data) {
                        console.log(data);

                        if (data.errcode == 0) {
                            if (that.page == 1) {
                                that.orderList = data.data.orderList;
                            } else {
                                $(data.data.orderList).each(function () {
                                    that.orderList.push(this);
                                })
                            }
                            that.pageinfo = data.data.Page;
                        } else {
                            alert(data.errmsg);
                        }
                    },
                    //error: function () {
                    //    alert("服务器加载异常");
                    //}
                })
            },
            seeInfo: function (Id, type) {
                if (type == 1) {
                    location.href = "orderdetails.html?Id=" + Id;
                }
                else if (type == 2) {
                    location.href = "TicketOrderInfo.html?TicketgId=" + Id;
                }
                else if (type == 3) {
                    location.href = "MyActivityInfo.html?gId=" + Id;
                }
            },
            indexSelect: function (event) {
                this.indexId = event.target.value;
                this.page = 1;
                page.getInfo();
                console.log(event.target.value);//在这里可以正确输出每个下拉框对应的下标值，当然输出值都是可以的
            }
        },
        watch: {
            page: function () {
                this.getInfo();
            }
        }
    });
    $(function () {
        page.getInfo();
    })
</script>
</html>
